<style scoped>
    .clickable_icon{
        cursor:pointer
    }
    .float_right{
        float:right;
    }

    .clickable_icon:hover{
        font-weight: bold;
        font-size: large;
    }

        .person-bar{
        float:right; 
        background-color:transparent;
        /* overflow:hidden; */
        text-overflow:ellipsis;
        /* padding-right: 10px; */
        /* width:180px; */
        height:100%;
        font-size:16px;
        /* text-align: right; */
    }

</style>

<template>
    <div>
        <div style="padding-left:20px;">
                    场景：
                    <div style="position:relative;display:inline">
                        <Select v-model="currentScene" style="width:100px" @on-change="scenesChange">
                            <Option v-for="scene in scenes" :value="scene.name" :key="scene.name">{{ scene.title }}</Option>
                        </Select>
                        <!-- <Button @click="toggleShowAdvanceFilter"><Icon type="funnel"></Icon>高级过滤</Button> -->
                        <!-- <AdvanceFilter v-show="showAdvanceFilter" :edit="editData"  style="position:absolute;z-index:1000;background-color:white;left:0px"></AdvanceFilter> -->
                    </div>

                    
            <div @click="refresh" style="position:relative;display:inline;padding-left:10px">
                <Icon type="ios-reload" class="clickable_icon"></Icon>
            </div>

            <div v-if="showAdd" class="person-bar">
                <div style="position:relative;display:inline">
                    <Button @click="toggleShowEditCard" type="primary">{{showEditCard?'收起':'添加'}}</Button>
                    <EditCard v-show="showEditCard" :edit="editData" @ok="postLog"  style="position:absolute;z-index:899;background-color:white;right:0px"></EditCard>
                </div>
            </div>  
        </div>
        <Timeline style="background-color:white;padding-left:20px;padding-top:20px">
        <!-- <transition-group
            name="staggered-fade"
            tag="div"
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
            > -->
        <Timeline-item v-for="ondDayLogs in groupedLogs" :key="ondDayLogs.day">
            <p class="time" style="padding-bottom:20px;font-weight: bold;" >{{getDateShowText(ondDayLogs.day)}}</p>
            <p v-for="log in ondDayLogs.logs" :key="log._id" style="padding-bottom:20px">
                <span>{{log.user}}</span> 投入 {{log.duration}}小时
                <span>{{getTimeRangeShowText(log.timerange)}}</span> 
                <span>{{log.content}}</span>
                <Tag v-for="(label,n) in log.labels" :key="n" >{{label}}</Tag>
                <span style="float:right">
                    <div style="display:inline" @click="showEdit(log)" v-if="log.user==user.name">
                        <Icon type="compose" class="clickable_icon"></Icon>
                    </div>
                    <div style="display:inline" @click="del(log)" v-if="log.user==user.name">
                        <Icon type="ios-trash-outline" class="clickable_icon"></Icon>
                    </div>
                    <!-- <div @click="toggleLike(log)">
                        <Icon :color="liked(log)?'#2d8cf0':''" :type="liked(log)?'android-favorite':'android-favorite-outline'" class="clickable_icon"></Icon>
                    </div> -->
                    {{log.likecount}}
                </span>
            </p>
        </Timeline-item>
        <!-- </transition-group> -->
        </Timeline>

        <Button @click="loadMore"  style="width:100%;border: none;">加载更多...</Button>
    </div>
</template>

<script>


import { mapState, mapGetters, mapActions } from 'vuex';
import AdvanceFilter from './advance-filter'
import EditCard from './edit'
import {getDateShowText, getTimeRangeShowText, FORMAT_STRING} from '../commons/tools';

export default {
    data(){
        return {}
    },
    props:{
        showAdd: {
            type: Boolean,
            default: false,
        }
    },
    components:{
        AdvanceFilter,
        EditCard
    },
    computed: Object.assign({},
        mapState({
            'user':'user',
            // 'friendLinks':'friendLinks',
            // 'project':'project',
        }),
        mapGetters(
            {
                'groupedLogs':'groupedLogs'
            }
        ),
        {
            editData(){
                return this.$store.state.editData
            },
            showEditCard(){
                return this.$store.state.showEditCard
            },
            showAdvanceFilter(){
                return this.$store.state.showAdvanceFilter;
            },
            currentScene: {
                get(){
                    return this.$store.state.currentScene;
                },
                set(value){
                    this.$store.commit('setCurrentScene', value);
                }
            },
            scenes(){
                return this.$store.state.scenes
            },
        },
    ),
    methods:Object.assign(
        mapActions([
            'listLogs',
            'deleteLog',
            'moreLogs',
            'postLog',
        ]),
        {
            getDateShowText,
            getTimeRangeShowText,
            liked(log){
               //TODO
               console.warn('not supported.');
            },
            showEdit(log){
                this.$store.commit('setEditData', log);
                this.$store.commit("setShowEditCard", true);
            },
            refresh(){
                this.listLogs();
                this.$Message.info('刷新成功');
            },
            del(log){
                this.$Modal.confirm({
                    // title: '是否删除',
                    content: '<p>确认要删除吗？</p>',
                    okText: '删除',
                    cancelText: '算了',
                    onOk: () => {
                        this.deleteLog(log);
                    },
                    onCancel: () => {
                        
                    }
                });
            },
            loadMore(){
                this.moreLogs();
            },
            toggleLike(log){
                this.$Notice.warning({
                    desc: '暂未实现，敬请期待',
                });
            },
            toggleShowEditCard: function(){
                this.$store.commit('setEditData',{
                    content:"",
                    duration:1,
                    day:new Date(),
                    timerange:[],
                    labels:[]
                });
                this.$store.commit("setShowEditCard",!this.showEditCard);
            },

            toggleShowAdvanceFilter: function(){
                this.$store.commit('setShowAdvanceFilter', !this.showAdvanceFilter);
            },
            scenesChange(){
                this.$store.state.conditionable = false;
                this.listLogs();
            }
    }),
}
</script>
